<template>
    <div>
        <Form :label-width="100" :model="dataToQuery">
            <div v-if="switchFlag">
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                        <FormItem label="创建人：">
                            <Input v-model="dataToQuery.userName" placeholder="请填写创建人"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="单位名称：">
                            <Input v-model="dataToQuery.orgName" placeholder="请填写创建人单位"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="写入年份：" >
                            <DatePicker class="query-form-el" v-model="dataToQuery.signYearDate" type="year" placement="bottom-end" placeholder="请选择查询时间段"
                                        @on-change="onSelectQueryDateRange"></DatePicker>
                        </FormItem>
                    </i-col>
                </Row>
                <Row :gutter="16" class="query-form2">
                    <i-col span="24">
                        <div style="float: right;">
                            <Button class="ivu-btn-query"  icon="md-search"  @click="query">查询</Button>
                            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
                            <Button @click="switchQuery(false)" style="margin-left: 10px" class="ivu-btn-switch2" type="text" >收起<Icon type="ios-arrow-up" /></Button>
                        </div>
                    </i-col>
                </Row>
            </div>
            <div v-else>
                <Row :gutter="16" class="query-form2" >
                    <i-col span="8">
                        <FormItem label="创建人：">
                            <Input v-model="dataToQuery.userName" placeholder="请填写创建人"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="单位名称：">
                            <Input v-model="dataToQuery.orgName" placeholder="请填写创建人单位"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <div style="float: right;">
                            <Button class="ivu-btn-query"  icon="md-search"  @click="query">查询</Button>
                            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
                            <Button @click="switchQuery(true)" style="margin-left: 5px" class="ivu-btn-switch2" type="text" >展开<Icon type="ios-arrow-down"/></Button>
                        </div>
                    </i-col>
                </Row>
            </div>
        </Form>
        <Row type="flex" justify="start" class="query-form">
            <i-col>
                <Button icon="md-add" class="ivu-btn-add" @click="addInfo">新增</Button>
            </i-col>
            <i-col>
                <Button icon="md-cloud-download" class="ivu-btn-add" @click="exportFormSubmit">导出</Button>
            </i-col>
        </Row>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row type="flex" justify="end" >
            <i-col span="24">
                <Page :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </i-col>
        </Row>

        <Modal  title="安全标准化自评" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"  :width=800 :styles="{height:'620px'}" class-name='limit-height-dialog'>
            <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'"
                  :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"
                  :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?170:null">
                <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
                    <i-col span="12">
                        <FormItem label='单位名称：' prop='orgName'>
                            <div v-if="mode === 'view'">{{ dataToView.orgName }}</div>
                            <orgDom ref="orgDom" @setOrgInfo="setOrgName" :orgInfo="{name: dataToView.orgName}" :rootOrgId="rootOrgId" v-else></orgDom>
                        </FormItem>
                    </i-col>
                    <i-col span="12">
                        <FormItem label='所属二级集团：'>
                            <div v-if="mode === 'view'">{{ dataToView.twoLevelGroupName }}</div>
                            <Input v-else v-model='dataToView.twoLevelGroupName'></Input>
                        </FormItem>
                    </i-col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
                    <i-col span="12">
                        <FormItem label='写入年份：' prop='signYearDate'>
                            <div v-if="mode === 'view'">{{ dataToView.signYear }}</div>
                            <DatePicker type="year" style="width: 100%" v-else v-model='dataToView.signYearDate'></DatePicker>
                        </FormItem>
                    </i-col>
                    <i-col span="12">

                    </i-col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
                    <i-col span="24">
                        <FormItem v-if="mode === 'view'" label="责任书附件：">
                            <div v-show="dataToView.idFiles.length>0"
                                 v-for="(item,index) in dataToView.idFiles">
                                <a @click="downloadFiles(item,index)"><span
                                        style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                                <Progress v-show="uploadListVisible[item.id]"
                                          :percent="uploadListPercent[index]"></Progress>
                            </div>
                        </FormItem>
                        <FormItem v-else label="责任书附件：" prop="idFiles">
                            <Upload ref="upload"
                                    :before-upload="(file) => { beforeUpload1(file, 'id', 'responsibilityAccount') }"
                                    :show-upload-list="true"
                                    :max-size="10240"
                                    multiple
                                    type="drag"
                                    :action="fileUrl">
                                <div style="padding: 10px">
                                    <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                                    <p>点击将文件拖拽到这里上传</p>
                                    <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                                </div>
                            </Upload>
                            <div v-show="dataToView.idFiles.length>0"
                                 v-for="(item,index) in dataToView.idFiles"
                                 :key='item'>
                                <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                                <Button type="text" icon="md-trash"
                                        @click="removeFile1(item.id, 'id', 'responsibilityAccount')"
                                        style="margin-left: 5px;margin-bottom: 3px"/>
                                <Progress v-show="uploadListVisible[item.id]"
                                          :percent="uploadListPercent[index]"></Progress>
                            </div>
                        </FormItem>
                    </i-col>
                </Row>
            </Form>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {formatDate, verifyIdCard, createFormAndSubmit} from '@/tools/index'
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import {sessionStorage} from '@/common/cacheUtils.js';
    import {Api} from '@/api/index.js'
    import svgBar from 'svg-progress-bar'
    import orgDom from "@/components/input-org.vue";

    export default {
        name: "responsibilityAccountList",
        components:{
            svgBar,
            orgDom,
        },
        data(){
            return{
                ...this.createCommonDataField(),
                switchFlag: false,
                tableHeight:10,
                columns1: [
                    { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    { key:'userName',title: '创建人',  align: 'center', minWidth: 120},
                    { key:'signYear',title: '写入年份',  align: 'center', minWidth: 120},
                    { key:'orgName',title: '单位名称',  align: 'center', minWidth: 200},
                    { key:'twoLevelGroupName',title: '所属二级集团',  align: 'center', minWidth: 200},
                    this.getActionColumns(),
                ],
                ruleCustom: {
                    signYearDate: [{required: true, message: '请填写上传年份', trigger: 'blur, change', type: 'date'}],
                    orgName: [{required: true, message: '请选择组织机构', trigger: 'blur, change'}],
                },
                queryUrl: Api.queryResponsibilityAccount,
                updateUrl:Api.updateResponsibilityAccount,
                saveUrl:Api.saveResponsibilityAccount,
                deleteUrl: Api.deleteResponsibilityAccount,
                exportUrl:Api.exportResponsibilityAccount,

                downloading: false,
                batchProcess: 0,
                rootOrgId: sessionStorage('userId').getObject('userId').companyId,
            }
        },
        computed: {
            options: function() {
                return {
                    radius: 50,//大小
                    duration: 2,//变化时间长度
                    circleWidth: 5,//圆环宽度
                    pathColors: ['#A2A2A2', '#FA5657'], //圆环 底色和 上面的颜色
                    circleLineCap: 'round',//进度条 形状  圆环 或者矩形
                    text: function (value) {
                        return this.htmlifyNumber(value) + '<span style="font-size: 0.4em;">%</span>';
                    },
                    textColor: 'rgb(33, 150, 243)'
                }
            }
        },
        async mounted() {
            this.setTableHeight();
            this.query();
        },
        methods: {
            ...pageCommonFunction,
            query() {
                if(this.dataToQuery.signYearDate == undefined || this.dataToQuery.signYearDate == '') this.dataToQuery.signYear = 0
                else this.dataToQuery.signYear = this.dataToQuery.signYearDate.getFullYear();
                this.dataToQuery.orgId = sessionStorage('userId').getObject('userId').companyId;
                this.queryAjax();
            },
            createEmptyDataToAdd() {
                return {
                    orgId: sessionStorage('userId').getObject('userId').companyId,
                    id: this.get_uuid(),
                    idFiles: [],
                }
            },
            async beforeEditDialogOpen(data) {
                data.row.signYearDate = new Date(data.row.signYear + '-01-01');
                setTimeout(() => {
                    this.$refs.orgDom.setCurrentOrg();
                }, 300);
            },
            beforeViewDialogOpen(data){
                data.row.createUserName = data.row.userName;
                data.row.companyName = data.row.orgName;
            },
            async afterDataToViewInit() {
                await this.getFiles1('id', 'responsibilityAccount');
            },
            submit(name) {
                this.dataToView.signYear = this.dataToView.signYearDate.getFullYear()
                this.submitAjax(name);
            },
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            setOrgName(data){
                this.dataToView.orgId = data.orgId;
                this.dataToView.orgName = data.orgName;
                this.queryTwolevelOrg(data.orgId);
            },
            queryTwolevelOrg(orgId) {
                this.$http.get(Api.securityDirectorInfo + '/twoLevelOrg', {params: {companyId: orgId}}).then((res) => {
                    if (res.data.status == 200) {
                        if (res.data.data != null) {
                            this.$set(this.dataToView, 'twoLevelGroupId', res.data.data.orgId);
                            this.$set(this.dataToView, 'twoLevelGroupName', res.data.data.orgName);
                        }
                    }
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
        }
    }
</script>

<style scoped>

</style>